<template>
  <div class="spongepants" @click.stop="aotuTab=false">

    <div>
      <el-button type="primary" style="margin-bottom: 10px" size="mini" @click="preserve()">{{ $t('btn.save') }}</el-button>
      <span style="color: red;font-size: 14px;margin-left: 10px">计价用量的计算方式：(上底+下底)*长*宽*厚*数量/1000000</span>
    </div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane :label="$t('market.info')" name="first">
        <el-form ref="purchaseRef" :model="process" label-width="100px" :rules="proRules">
          <el-form-item :label="$t('market.documentstatus')">
            <el-tag :type="process.stateColor">{{ process.fdocumentStatus }}</el-tag>
          </el-form-item>
          <el-form-item :label="$t('market.cust')" prop="fname">
            <el-input v-model.trim="process.fname" size="mini" />
          </el-form-item>
          <el-form-item :label="$t('market.fmaterial')" prop="fmaterialId">
            <el-input
              v-model.trim="process.fnumber"
              placeholder="请选择物料"
              size="mini"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="materia(-1)"
              />
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('shop.fname2')" prop="fmaterName">
            <el-input v-model.trim="process.fmaterName" size="mini" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.fmodel2')" prop="fmodel" label-width="5.8vw">
            <el-input v-model.trim="process.fmodel" size="mini" disabled />
          </el-form-item>
          <el-form-item :label="$t('shop.fspecificaTion')" prop="fspecificaTion">
            <el-input v-model.trim="process.fspecificaTion" size="mini" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.fdescripTion')" prop="fdescripTion">
            <el-input v-model.trim="process.fdescripTion" size="mini" disabled style="width: 600px" />
          </el-form-item>
        </el-form>
        <div style="margin-top: 1.2vh">
          <el-button class="newBtn" style="margin-bottom: 5px;" size="mini" @click="newHang(1)">{{ $t('btn.newHang') }}<!--新增行--></el-button>
          <el-button size="mini" @click="batchFill">{{ $t('btn.batchFill') }}<!--批量填充--></el-button>
          <jc-table
            v-if="isRouterAlive"
            :table-data="tableData"
            :table-header="tableHeard"
            :table-height="tableHeight"
            serial
            @rowClick="techClick"
            @cellClick="cellClick"
          >
            <el-table-column label="部件名称" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.fpartsName"
                  size="mini"
                />
              </template>
            </el-table-column>
            <el-table-column :label="$t('market.fmaterial')" align="center" min-width="150px">
              <template slot-scope="scope">
                <el-input
                  v-model.trim="scope.row.fnumber"
                  placeholder="请选择物料"
                  size="mini"
                  @input="getAtuo(scope.$index, scope.row.fnumber)"
                >
                  <i
                    slot="suffix"
                    class="el-input__icon el-icon-search"
                    @click="materia(scope.$index)"
                  />
                </el-input>
                <div v-if="aotuTab && indexSelf === scope.$index" :class="indexSelf<6 ? 'tabPosit': 'tabPosit1'">
                  <number-code :fnumber="fnumber" :fnumbers="fnumbers" @material="materialData" />
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('shop.fname2')" prop="fname" align="center" show-overflow-tooltip />
            <el-table-column :label="$t('market.fmodel2')" prop="fmodel" align="center" show-overflow-tooltip />
            <el-table-column :label="$t('market.fdescripTion')" prop="fdescripTion" align="center" min-width="200px" show-overflow-tooltip />
            <el-table-column label="上底(cm)" prop="ftop" align="center">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.ftop" size="mini" @change="volumeChange(scope.$index)" />
              </template>
            </el-table-column>
            <el-table-column label="下底(cm)" prop="fout" align="center">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.fout" size="mini" @change="volumeChange(scope.$index)" />
              </template>
            </el-table-column>
            <el-table-column label="长(cm)*宽(cm)*厚度(cm)" align="center" min-width="230px">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.flength" style="width: 65px" size="mini" @change="volumeChange(scope.$index)" />*
                <el-input-number v-model="scope.row.fwidth" style="width: 65px" size="mini" @change="volumeChange(scope.$index)" />*
                <el-input-number v-model="scope.row.fhelght" style="width: 65px" size="mini" @change="volumeChange(scope.$index)" />
              </template>
            </el-table-column>
            <el-table-column :label="$t('market.fqty')" prop="fqty" align="center">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.fqty" size="mini" @change="volumeChange(scope.$index)" />
              </template>
            </el-table-column>
            <el-table-column label="参数" prop="fparameter" align="center">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.fparameter" size="mini" />
              </template>
            </el-table-column>
            <el-table-column label="计价用量" align="center" prop="fdosage" />
            <el-table-column :label="$t('market.note')" align="center" prop="fnote">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.fnote"
                  size="mini"
                />
              </template>
            </el-table-column>
            <el-table-column :label="$t('market.handle')" align="center">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  size="mini"
                  @click="proDelect(scope.$index)"
                >{{ $t('shop.delete') }}</el-button>
              </template>
            </el-table-column>
          </jc-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!--    物料弹窗-->
    <material v-if="isMateria" :fnumbers="fnumbers" @material="materialData" />
  </div>
</template>

<script>
import {
  insertSponge
} from '@/api/workshop/spongePants'
import searData from '@/components/Search/mixin'
import autocomplete from '@/views/market/marketManage/createMarkerOrder/components/autocomplete'

export default {
  components: {
    material: () => import('@/views/market/marketManage/createMarkerOrder/components/material'),
    numberCode: () => import('@/components/NumberCode')
  },
  mixins: [searData, autocomplete],
  data() {
    return {
      ftype: 14,
      activeName: 'first',
      active: 'first',
      fnumbers: '3-1-03-31,3-1-03-41',
      process: {
        fname: '',
        fnumber: '',
        fmaterialId: '',
        fmodel: '',
        fdescripTion: '',
        fmaterName: '',
        fspecificaTion: '',
        fdocumentStatus: '创建'
      },
      fnumber: '',
      aotuTab: false,
      isMateria: false, // 物料
      indexSelf: 0,
      indexSelf1: 0,
      tableHeight: '65vh',
      tableHeight1: '500px',
      tableData: [{
        fpartsName: '',
        fmaterialId: '',
        fdescripTion: '',
        fmodel: '',
        fname: '',
        fnumber: '',
        fparameter: 1000000,
        ftop: 0,
        fout: 0,
        fqty: 1,
        fdosage: 0,
        flength: 0,
        fwidth: 0,
        fhelght: 0,
        fsupplierId: '',
        fpricelistId: '',
        fnote: ''
      }],
      delArr: [],
      total: 0, // 总条目
      pageNum: 1, // 当前页
      pageSize: 200, // 每页显示多少条数据
      tableHeard: [],
      proRules: {
        fname: [
          { required: true, message: '请输入海绵库名称', trigger: 'blur' }
        ]
      },
      priceIndex: 0,
      isRouterAlive: true
    }
  },
  created() {
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 330px)' : '62vh'
  },
  methods: {
    // 局部刷新
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    },
    // 输入物料编码
    getAtuo(index, fnumber) {
      this.indexSelf = index
      this.aotuTab = true
      var vm = this
      clearTimeout(vm.timer) // 清除未执行的代码，重置回初始化状态
      vm.timer = setTimeout(() => {
        this.fnumber = fnumber
      }, 600)
    },
    // 监听长 宽 高,获取计价用量
    volumeChange(index) {
      const item = this.tableData[index]
      // item.fdosage = item.flength * item.fwidth * item.fhelght
      item.fdosage = ((item.ftop + item.fout) / 2 + item.flength) * item.fwidth * item.fhelght * item.fqty / 1000000
    },
    // 打开物料弹窗
    materia(index) {
      this.isMateria = true
      this.indexSelf = index
    },
    // 获取物料
    materialData(ev) {
      if (ev.fnumber) {
        if (this.indexSelf === -1) {
          this.process.fnumber = ev.fnumber
          this.process.fmaterialId = ev.fmaterialId
          this.process.fmodel = ev.fmodel
          this.process.fdescripTion = ev.fdescripTion
          this.process.fmaterName = ev.fname
          this.process.fspecificaTion = ev.fspecificaTion
        } else {
          const item = this.tableData[this.indexSelf]
          item.fnumber = ev.fnumber
          item.fmaterialId = ev.fmaterialId
          item.fmodel = ev.fmodel
          item.fdescripTion = ev.fdescripTion
          item.fname = ev.fname
          item.fdescripTion = ev.fdescripTion
          this.aotuTab = false
        }
      }
      this.isMateria = false
    },
    // 保存
    preserve() {
      const DATA = {
        fmaterialId: this.process.fmaterialId,
        fname: this.process.fname,
        entry: this.tableData
      }
      this.$refs.purchaseRef.validate((valid) => {
        if (valid) {
          insertSponge(DATA).then(res => {
            if (res.code === 0) {
              Object.keys(this.process).forEach(res => {
                this.process[res] = ''
              })
              this.process.fdocumentStatus = '创建'
              this.tableData = []
              this.$router.push({ path: '/spongePantsEdit', query: {
                fbillNo: res.data
              }
              })
              this.$message({ showClose: true, message: res.message, type: 'success' })
            } else {
              this.$message({
                type: 'error',
                dangerouslyUseHTMLString: true,
                message: res.message
              })
            }
          })
        } else {
          return false
        }
      })
    },
    // 点击表格行，获取下标
    techClick(row) {
      this.indexSelf1 = row.fseq
    },
    // 新增行
    newHang(ev) {
      const data = {
        fpartsName: '',
        fmaterialId: '',
        fdescripTion: '',
        fmodel: '',
        fname: '',
        fnumber: '',
        fparameter: 1000000,
        ftop: 0,
        fout: 0,
        fqty: 1,
        fdosage: 0,
        flength: 0,
        fwidth: 0,
        fhelght: 0,
        fsupplierId: '',
        fpricelistId: '',
        fnote: ''
      }
      this.tableData.push(data)
    },
    // 点击单元格
    cellClick(row, column, cell, event) {
      this.property = column.property
      this.subscript = row.index
    },
    // 批量填充
    batchFill() {
      // 填充
      const item = this.tableData[this.subscript][this.property]
      this.tableData.map((res, index) => {
        if (index >= this.subscript) {
          res[this.property] = item
        }
      })
    },
    // 刪除
    proDelect(index) {
      this.tableData.splice(index, 1)
    }
  }
}
</script>
<style lang="scss" scope>
.spongepants {
  @include listBom;
  .tabPosit {
    padding: 5px;
    box-shadow: 0 0 2px #aaa;
    position: absolute;
    top: 3.82vh;
    left: 0;
    background-color: rgba(255, 255, 255, 1);
    z-index: 99999!important;
  }
  .tabPosit1 {
    padding: 5px;
    box-shadow: 0 0 2px #aaa;
    position: absolute;
    top: -25.69vh;
    left:0vw;
    background-color: rgba(255, 255, 255, 1);
    z-index: 9999;
  }
  .el-tabs {
    .el-form {
      display: flex;
      flex-wrap: wrap;
      .el-input .el-input__inner {
        height: 30px;
        line-height: 30px;
      }
      .el-form-item {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 35px;
        width: 275px;
        margin-bottom: 3px;
        .btnType {
          margin-right: 5px;
        }

        .el-date-editor.el-input {
          width: 100% !important;
        }

        .el-select {
          width: 100%;
        }
      }
    }
  }
}
</style>
